<template>
  <div class="map-wrapper">
    <div id="pageDom"></div>
    <div class="bottom">
      <bottomCategoryList :zx-list="zxCategorylist"></bottomCategoryList>
    </div>

    <markerAreaModal ref="markerAreaModal"></markerAreaModal>
  </div>
</template>
<script>
import markerAreaModal from "./modules/markerAreaModal.vue";
import bottomCategoryList from "../../components/bottomCategoryList.vue";
export default {
  components:{bottomCategoryList,markerAreaModal},
  data(){
    return{
      defaultCenter: [118.765671,32.021186], //南京
      map:null,

      zxCategorylist:[
        {
          smallIcon:require("@/assets/img/newCmcc/sf.png"),
          name:'室分',
          value:'sf'
        },
        {
          smallIcon:require("@/assets/img/newCmcc/hz.png"),
          name:'宏站',
          value:'hz'
        },
        {
          smallIcon:require("@/assets/img/newCmcc/wz.png"),
          name:'微站',
          value:'wz'
        },
        {
          smallIcon:require("@/assets/img/newCmcc/wd.png"),
          name:'外打',
          value:'wd'
        },
      ],
      isOpen:true,
      showRight:false,

      allMarkers:[
        { position: [118.7969, 32.061], type: "sf",top:10,name:'南京总统府',zm:'室分',zx:'XXXXXX',id:1 },
        { position: [118.7975, 32.062], type: "wz",top:21,name:'南京博物院',zm:'微站',zx:'XXXXXX',id:2 },
        { position: [118.798, 32.060], type: "hz",top:31,name:'夫子庙',zm:'宏站',zx:'XXXXXX',id:3 },
        { position: [118.76, 31.97], type: "sf",top:51,name:'嘉华科技股份有限公司',zm:'室分',zx:'XXXXXX',id:4},
        { position: [118.8162, 31.9336], type: "wd",top:5,name:'百家湖',zm:'外打',zx:'XXXXXX',id:5 },

        { position: [118.8632, 32.0420], type: "sf",top:33,name:'中山陵',zm:'室分',zx:'XXXXXX',id:6 },
        { position: [118.8239, 32.0382], type: "wz",top:13,name:'南京农业大学',zm:'微站',zx:'XXXXXX',id:7 },
        { position: [118.8833, 31.9913], type: "hz",top:22,name:'东山',zm:'宏站',zx:'XXXXXX',id:8},
        { position: [118.7772, 32.0144], type: "wz",top:60,name:'南京科技馆',zm:'微站',zx:'XXXXXX',id:9 },
      ],

      markers: [],
      iconMapping: {
        sf: require('@/assets/img/newCmcc/sf.png'),
        wz: require('@/assets/img/newCmcc/wz.png'),
        hz: require('@/assets/img/newCmcc/hz.png'),
        wd: require('@/assets/img/newCmcc/wd.png'),
      },
      actveIconMapping:{
        sf: require('@/assets/img/newCmcc/sf-active.png'),
        wz: require('@/assets/img/newCmcc/wz-active.png'),
        hz: require('@/assets/img/newCmcc/hz-active.png'),
        wd: require('@/assets/img/newCmcc/wd-active.png'),
      },
      actveTopIcon:{
        sf: require('@/assets/img/newCmcc/active-sf-top.png'),
        wz: require('@/assets/img/newCmcc/active-wz-top.png'),
        hz: require('@/assets/img/newCmcc/active-hz-top.png'),
        wd: require('@/assets/img/newCmcc/active-wd-top.png'),
      },
      searchParams:{
        activeZxList:[],
        activejypmTopValue:0,
      },
      currentClickMarker:null,
      iconSize:null,
      currentNormalIcon:'',
      rightTitle:'',
      markerArr:[],
      activeMarkerId: null, // 保存当前激活的marker的ID
    }
  },
  mounted(){
    this.markers=JSON.parse(JSON.stringify(this.allMarkers))
    this.$nextTick(() => {
      this.initGaodeMap()
    })
  },
  watch:{
  },
  methods:{
    initGaodeMap(){
      this.map = new AMap.Map('pageDom', {
        zoom: 13, //初始地图级别
        resizeEnable: true,
        center: this.defaultCenter, // 设置中心点
        // mapStyle: 'amap://styles/darkblue' // 使用深色样式
        mapStyle: 'amap://styles/whitesmoke' // 使用深色样式
      });

      this.markers=JSON.parse(JSON.stringify(this.allMarkers))
      this.markerInit();
      this.addArea()

      this.map.on("zoomend", (e)=> {//监听地图缩放
        this.markerInit();
        this.addArea()
      });
      this.map.on("dragend", (e)=> {//监听地图拖曳
        this.markerInit();
        this.addArea()
      });

    },

    markerInit(){
      if(!this.map){
        return
      }
      this.map.clearMap()// 清除地图上所有添加的覆盖物

      this.markers.forEach(item=>{
        let point = new AMap.LngLat(+item.position[0],+item.position[1])
        let markerContent = `<div class="custom-label">
            <img src="${require('@/assets/img/newCmcc/normal-top-bg.png')}" alt="">
            <span>TOP${item.top}</span>
        </div>`

        let iconPath = this.iconMapping[item.type];
        var defaultIcon = new AMap.Icon({
          image: iconPath,
          size: new AMap.Size(32, 32),
          imageSize: new AMap.Size(32, 32),
        });

        let marker = new AMap.Marker({
          position:point,
          // offset: new AMap.Pixel(0, 0),
          icon:defaultIcon,
          extData: item.id, // 保存标记的唯一ID
        })

        // 设置标签
        let defaultLabelInfo={
          offset: new AMap.Pixel(-42, -32), // 设置label相对于marker的位置 第一个是水平位置 第二个是竖直位子
          content: markerContent, // 自定义内容
        }
        marker.setLabel(defaultLabelInfo);

        // this.map.add(marker);

        let activeIcon = this.actveIconMapping[item.type];

        var activeNewIcon = new AMap.Icon({
          image: activeIcon, // 替换为新的图片
          size: new AMap.Size(50, 50),
          imageOffset: new AMap.Pixel(-10, -10), // 设置偏移量
          imageSize: new AMap.Size(50, 50),
        });

        let actveTopImg = this.actveTopIcon[item.type]

        let activeMarkerContent = `<div class="custom-label active-custom-label">
            <img src="${actveTopImg}" alt="">
            <span>TOP${item.top}</span>
          </div>`

        let activeLabelInfo={
          offset: new AMap.Pixel(-85, -68), // 根据激活图标调整偏移量
          content: activeMarkerContent, // 你希望显示的内容
        }
        //接下来是marker的点击事件，点击展示 自定义信息窗口；
        marker.on('click',()=>{
          this.setActiveMarker(marker,activeNewIcon,activeLabelInfo)
        })
        let markItem={
          marker:marker,
          defaultIcon:defaultIcon,
          activeNewIcon:activeNewIcon,
          activeLabelInfo:activeLabelInfo,
          defaultLabelInfo:defaultLabelInfo,
          id:item.id,
        }
        this.markerArr.push(markItem);
      })

      let markerList = this.markerArr.map(item=>item.marker)
      this.map.add(markerList)
      // this.map.setFitView(markerList);

    },
    //设置点击后的图标
    setActiveMarker(marker,activeIcon,activeLabelInfo){
      const markerId = marker.getExtData();

      if (this.activeMarkerId !== null && this.activeMarkerId !== markerId) {
        const previousMarkerItem = this.markerArr.find(
            (m) => m.id === this.activeMarkerId
        );

        let {defaultIcon,defaultLabelInfo}=previousMarkerItem
        previousMarkerItem.marker.setIcon(defaultIcon);
        previousMarkerItem.marker.setLabel(defaultLabelInfo)
      }

      // 设置当前点击的marker为激活状态图标
      marker.setIcon(activeIcon);
      marker.setLabel(activeLabelInfo)
      this.activeMarkerId = markerId;

    },
    addArea(){
      // 定义夫子庙的多边形坐标
      var polygonCoords = [
        [118.796, 32.046], // 左下角
        [118.802, 32.046], // 右下角
        [118.802, 32.050], // 右上角
        [118.796, 32.050]  // 左上角
      ];

      // 创建多边形
      var polygon = new AMap.Polygon({
        path: polygonCoords,
        strokeColor: 'rgba(255, 206, 0, 1)', // 边框颜色
        strokeWeight: 2,        // 边框宽度
        fillColor: 'rgba(255, 206, 0, 0.20)',   // 填充颜色
        fillOpacity: 0.5        // 填充透明度
      });

      // 将多边形添加到地图
      polygon.setMap(this.map);

      polygon.on('mouseover', (e)=> {
        polygon.setOptions({
          fillColor: 'rgba(255, 206, 0, 1)', // 悬浮时填充颜色
          fillOpacity: 0.8      // 悬浮时透明度
        });
      })

      polygon.on("mouseout", () => {
        polygon.setOptions({
          fillColor: 'rgba(255, 206, 0, 0.20)', // 悬浮时填充颜色
          fillOpacity: 0.5     // 悬浮时透明度
        });
      });

      polygon.on('click',()=>{
        this.showRight=!this.showRight
        this.rightTitle='区域信息'
      })
    },
  }
}

</script>
<style scoped lang="less">

.map-wrapper{
  position: relative;
  height: 100vh;
  width: 100%;


  .bottom{
    position: absolute;
    bottom: 18px;
    z-index: 999999!important;
    left: 50%;
    transform: translateX(-50%);
  }

}
#pageDom{
  width: 100%;
  height: 100%;
}

::v-deep .amap-marker-label{
  background-color: transparent !important;
  border: none !important;
}

::v-deep .amap-copyright{
  display: none !important;
}
::v-deep .amap-logo{
  display: none !important;
}

::v-deep .custom-label{
  position: relative;
  //margin-left: -2px;
  >span{
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 4px;
    left: 7px;
  }
}

::v-deep .active-custom-label{
  >span{
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 24px !important;
    left: 30px !important;
  }
}
</style>
